[우테코] level1 - 자판기 미션 회고

April 08, 2022

레벨 1의 마지막 미션인 자판기 미션에 대해 회고를 해보려한다.

이번 미션은 자판기를 구현하는 것이었다. 프리코스 때 해보았기 때문에 처음에는 괜찮겠네라고 생각했었다. 하지만, 모든 미션들 중에서 가장 다급하게 완성한 미션이 되어버렸다.

미션의 특징

자판기 미션은 아래와 같은 특징들이 있었다.

여러 개의 탭이 존재.
- 상품관리, 상품 구매, 잔돈 충전 탭이 존재해서 탭 버튼을 누를 때마다 다른 UI들이 보여야 함.

SPA로 구현
- 여러 웹 사이트들처럼 Single Page Application으로 구현하라는 요구사항이 있었음
- SPA란 말 그대로 하나의 페이지로 이루어진 웹 애플리케이션이라는 뜻
- 즉, html이 하나만 존재한다고 이해하면 쉽다. 이후, 사용자와의 상호작용을 통해 javascript를 통해서 html과 css를 변경하고 렌더링해 사용자에게 변화한 것들을 보여주는 방식

라우터 구현
- history api를 이용하여 url의 맨 끝에 path를 나타내는 부분을 추가해서 SPA로 구현되었지만 사용자에게 뒤로 가기와 앞으로 가기 기능을 제공할 수 있었다.

타입 스크립트 사용
- 자바스크립트가 동적 언어여서 발생하는 단점을 보완하기 위해 타입을 설정해줄 수 있는 타입 스크립트를 사용하여 미션을 구현하여야 했다.
- 짧게 설명하자면, 타입 스크립트로 코드를 작성하고 바벨(babel)을 활용하여 자바스크립트로 트랜스 파일 하는 방식이다.
트랜스 파일과 컴파일의 개념이 비슷해서 타입 스크립트에서 자바스크립트로의 변환이 컴파일인지? 트랜스파일인지? 궁금할 수도 있다. 찾아보니 higher -> lower로 변환하는 것이 컴파일이고 같은 추상화 단계에서 변환이 일어나면 트랜스 파일이라고 한다고 한다. 그러므로 타입스크립트 -> 자바스크립트는 트랜스파일이라고 봐도 된다.

구현 방식

유튜브 미션 때처럼, 디자인 패턴을 따로 설정하지 않고 설계를 하고, 도메인과 UI를 나눠서 구현을 해줬다. TDD를 진행해주었고, 기능을 구현하기 전에 typescript의 interface를 통해 클래스를 미리 설계해주고 진행을 해주었다. interface로 클래스에서 어떤 메서드를 public으로 공개할지와 private으로 해줄지를 미리 생각할 수 있어서 나중에 코드를 작성할 때 헷갈리지 않고 메서드와 상태 구성을 마칠 수 있었다. 아래는 1단계 PR과 2단계 PR이다. 구현하면서 생각한 것들을 정리해놨으니 참고하면 좋을 것 같다!

자판기 1단계 저장소

자판기 2단계 저장소

느낀 점 - 급하게 미션을 진행하다 보니 예전의 코딩 습관이 돌아오는 느낌이다.

이번 자판기 미션 마지막쯤에 급하게 미션을 진행하게 되었다. 이전보다 1주일 정도의 시간이 더 있는 줄 알고 첫 주에 조금 여유롭게 2단계를 진행했었고 이 때문에 마지막에 급하게 코드를 작성하고 제출을 했다. 레벨 1에서 생각을 담는 코드를 작성하고 코드 한 줄 한 줄에 나만의 이유를 작성하는 것이 목표이고 계속 그렇게 진행해왔는데, 이번 막바지에는 생각을 담지 못하고 기능을 구현하기에 급급했던 경우가 많았었다.

왜 그랬을까?

이런 생각이 들었다. 그것은 아마 내가 조금 지치지 않을까라는 생각이 들었다. 새로 배운 개념들을 탐구하고 생각을 담아내고 이런 것들이 다 나에게 어떠한 용량의 에너지가 필요해서 이 행동들을 하기 위해서는 에너지가 필요한데 막바지에는 급하고, 기능을 구현하는데만 집중하다 보니 하지 못했던 것 같다.

어떻게 하면 이번 같은 상황이 안 생기도록 할 수 있을까?

솔직히 잘 모르겠다. 먼저, 앞에서 왜 이런 일이 발생했을까에 대한 간략한 생각 정리를 했었다. 아래처럼 정리를 해볼 수 있겠다.

아직 코드에 내 생각을 담기가 체화되어 있지 않다.
- 체화되어 있지 않기 때문에 추가적인 에너지가 필요하고, 여기에 쓸 에너지가 없는 상태에서는 생각을 담기가 불가능해진다. 체화시켜야 한다.

학습동기가 부족했기 때문에, 익숙해졌기 때문일 수도 있겠다.
- 익숙해졌기 때문에 -> 학습동기가 부족해졌고 -> 이제 생각을 담는 코드를 작성해야지라는 동기가 없어졌다.

정리해보면, 아마 내 성격상 동기부여가 작아져서 그런 것 같다. 계속 이렇게 된다면 레벨 2,3,4,5에서도 똑같이 있고 성장을 할 수 없을 것이다.

결론은 메인 클래스에 포함시키자!

지금까지의 경험을 토대로 생각해보면, 여러 Todo와 지켜야 할 것들을 정해도 나중에는 거의 까먹는다. (오늘 글을 이렇게 썼지만 아마 까먹을 것이다…😂) 그래서 메인만 몇 가지 정해서 그것만은 하도록 내 머릿속을 프로그래밍하는 것이 경험상 놓치지 않고 메인에 있는 것들은 다 수행할 수 있었다.

우테코 생활을 하면서 정한 나만의 생활 철칙이 있다. 어떠한 상황이 생겨서 조급함이 커지고 불안해지면 이 생활 철칙을 따르자라고 정했던 것이다. 그것은 바로 '메인에 집중하자'였다. 마치 메인이라는 클래스를 만들고 거기 안에 어떤 것에 집중할지 메서드를 만들어 놓는 것이다.

현재 메인 클래스는 아래와 같다. 자바스크립트 공부하기!! 레벨 1의 목표는 무엇보다도 자바스크립트를 마스터하는 것이라고 생각했다. 그래서 아래처럼 현재 메인에는 자바스크립트 공부하기가 집중할 것들에 포함되어 있다. 메인이라는 클래스에 코드에 내 생각 담기를 추가하려고 한다.

class 메인 {
 constructor {
  this.집중할것들 = [자바스크립트 공부하기]
 }

 집중하기() {
  실행하다(this.집중할것들)
 }

 자바스크립트 공부하기() {}
}

아래는 메서드가 추가된 메인 클래스이다. 잘 지켜보자

class 메인 {
 constructor {
  this.집중할것들 = [자바스크립트 공부하기, 내 생각을 담아서 코딩하기]
 }

 집중하기() {
  실행하다(this.집중할것들)
 }

 자바스크립트 공부하기() {}

 내 생각을 담아서 코딩하기() {}
}

미션 링크

Written by@albur

꾸준히 나아가자

GitHub LinkedIn